<template>
  <view class="person-data bg-white p-20rpx mb-20rpx"
    :class="[`${themeConfig.theme}-data`]"
    @click="handleClick(data)"
  >
    <view class="flex-sb-center">
      <view class="flex-center">
        <view class="color-white bg-#F7622B rounded-8rpx font-size-24rpx flex-center w-139rpx h-34rpx mr-10rpx leading-0"
          v-if="data.verificationFlag"
        >已实名认证</view>
        <view class="color-white bg-#F7622B rounded-8rpx font-size-24rpx flex-center w-70rpx h-34rpx mr-10rpx leading-0"
          v-if="data.membershipName && !data.rewardFlag"
        >{{ getMembershipName(data.membershipName) }}</view>
        <view class="color-white bg-#9C6DEF rounded-8rpx font-size-24rpx flex-center w-120rpx h-34rpx mr-10rpx leading-0"
          v-if="data.rewardFlag"
        >悬赏征婚</view>
        <wd-text :text="`ID: ${data.code}`" color="#9C6DEF" size="28rpx"></wd-text>
      </view>
       
      <view class="flex-a-center color-#9C6DEF max-w-240rpx">
        <i class="iconfont icon-dingwei font-size-32rpx mr-6rpx"></i>
        <wd-text 
          v-if="isShowDistrictName"
          :text="`${getInfoVo(data).districtName || '-'}`" 
          size="28rpx" 
          :lines="1"
          color="#9C6DEF"
        ></wd-text>
        <wd-text 
          v-else
          :text="`${getInfoVo(data).cityName || '-'}${getInfoVo(data).districtName || '-'}`" 
          size="28rpx" 
          :lines="1"
          color="#9C6DEF"
        ></wd-text>
      </view>
    </view>
    
    <view class="flex-sb mt-18rpx pb-20rpx">
      <view>
        <view class="flex-sb-center">
          <view class="flex-a-center">
            <view>
              <wd-text 
                custom-class="leading-0"
                :text="`${getInfoVo(data).gender == '0' ? '男' : '女'}·`"  
                size="38rpx" 
                bold
              ></wd-text>
              <wd-text 
                custom-class="leading-0"
                :text="`${calculateAge(getInfoVo(data).birthYearMonth)}岁`" 
                size="38rpx" 
                bold
              ></wd-text>
              <wd-text 
                custom-class="leading-0"
                v-if="getInfoVo(data).height"
                :text="`·${getInfoVo(data).height}cm`" 
                size="38rpx" 
                bold
              ></wd-text>
            </view>
            <!-- 星座 -->
            <base-tag 
              tagClass="ml-14rpx !font-size-28rpx !h-33rpx !bg-#F4EFFF !color-#9C6DEF" 
              :text="getInfoVo(data).zodiacName" 
              v-if="getInfoVo(data).zodiacName" 
            />
          </view>
        </view>
        <view class="flex mt-8rpx">
          <base-tag :text="getInfoVo(data).educationLevelName" v-if="getInfoVo(data).educationLevelName" />
          <base-tag :text="getInfoVo(data).carHouseStatusName" v-if="getInfoVo(data).carHouseStatusName" />
          <base-tag :text="getInfoVo(data).maritalStatusName" v-if="getInfoVo(data).maritalStatusName" />
        </view>
        <view class="mt-16rpx flex-a-center">
          <view class="font-size-0 inline-block mr-6rpx">
            <wd-img 
              width="34rpx" 
              height="34rpx" 
              radius="34rpx" 
              :src="professionIcon" 
              mode="aspectFill" 
            />
          </view>
          <wd-text class="inline-block" 
            :text="getInfoVo(data).professionName || '--'" 
            size="28rpx" :lines="1"
            :color="themeConfig.theme === 'dark' ? '#fff': '#272727'"
          ></wd-text>
        </view>
      </view>
      <base-img-box 
        class="mt-6rpx" 
        :imgNum="data.personalPhotoNum" 
        :size="155" 
        :imgSrc="getAvatar(data)" 
        :thumbnailPreUrl="data.personAvatar && data.personAvatar.thumbnailPreUrl" 
      />
    </view>
    
    <view class="flex-sb-center my-18rpx">
      <base-tag 
        tagClass="!font-size-24rpx !h-34rpx" 
        text="置顶中" 
        v-if="data.topFlag"
      />
      <view class="color-#333 font-size-26rpx">
        {{ formatDate(new Date(data.operateTime)) }}
      </view>
    </view>

    <view class="border-1px"></view>
    <view class="mt-10rpx font-500 font-size-30rpx line-height-44rpx flex-sb-center">
      <text>择偶要求</text>
    </view>
    <view class="mt-8rpx  font-size-26rpx line-height-34rpx pb-24rpx">
      {{ getInfoVo(data).partnerRequirements || '--' }}
    </view>
  </view>
</template>

<script lang="ts" setup>
import BaseTag from "@/components/base/base-tag.vue";
import baseImgBox from "@/components/base/base-img-box.vue";
import { useThemeStore, useUserStore } from "@/store";
import { calculateAge, formatDate } from "@/utils";
import { professionIcon } from "@/static/base64";
import { PropType } from "vue";

// 主题颜色
const { themeConfig } = useThemeStore();
// 用户信息
const user = useUserStore();

const props = defineProps({
  data: {
    type: Object as PropType<any>,
    default: () => ({})
  },
  isShowDistrictName: {
    type: Boolean,
    default: false
  }
})

const handleClick = (data) => {
  if (!user.isLogined) {
    uni.navigateTo({ url: '/pages/login/index' });
    return
  }
  uni.navigateTo({ 
    url: `/activity/userDetail?id=${data.id}`
  })
}

const getInfoVo = computed(() => {
  return (data) => {
    const _userProfileInfoVo = data.userProfileInfoVo || {};
    return _userProfileInfoVo
  }
})

// 获取头像
const getAvatar = computed(() => {
  return (data) => {
    const personAvatar = data.personAvatar || {};
    return personAvatar.preUrl || ''
  }
})

const getMembershipName = computed(() => {
  return (name) => {
    if (!name) return '';
    return name.slice(0, 2);
  }
})
</script>

<script lang="ts">
export default {
  // 微信小程序开启样式穿透
  options: { styleIsolation: "shared" },
};
</script>

<style lang="scss" scoped>
.person-data {
  box-shadow: 0 12rpx 28rpx -16rpx #F5D9FF, 0 -8rpx 18rpx -14rpx #ECBDFD;
  border-radius: 12rpx;
}

.dark-data {
  color: #f5f5f5;
  background-color: #141414;
  box-shadow: 0 12rpx 28rpx -16rpx #141414, 0 -8rpx 18rpx -14rpx #141414;
}
</style>
